<template>
    <div ref="ech" id="box">
    </div>
</template>

<script>
import * as echarts from "echarts";
export default {
    props: {
    },
    data() {
        return {};
    },
    methods: {
        handleSearch() {
            // 三 局部使用
            // 1 初始化echarts,获取dom元素
            let myChart = echarts.init(this.$refs.ech);
            // 2 配置图表和数据
            let data = [90, 80, 75, 65, 65];
            let titlename = ["javascript", "VUE", "jQuery", "HTML5", "CSS3"];
            let valdata = ["精通", "熟练", "熟练", "掌握", "掌握"];
            let myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
            let option = {
                //图标位置
                grid: {
                    top: "10%",
                    left: "22%",
                    bottom: "10%"
                },
                xAxis: {
                    show: false
                },
                yAxis: [
                    {
                        show: true,
                        data: titlename,
                        inverse: true,
                        axisLine: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: "#fff",

                            rich: {
                                lg: {
                                    backgroundColor: "#339911",
                                    color: "#fff",
                                    borderRadius: 15,
                                    // padding: 5,
                                    align: "center",
                                    width: 15,
                                    height: 15
                                }
                            }
                        }
                    },
                    {
                        show: true,
                        inverse: true,
                        data: valdata,
                        axisLabel: {
                            textStyle: {
                                fontSize: 12,
                                color: "#fff"
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: "条",
                        type: "bar",
                        yAxisIndex: 0,
                        data: data,
                        barCategoryGap: 50,
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                barBorderRadius: 20,
                                color: function (params) {
                                    var num = myColor.length;
                                    return myColor[params.dataIndex % num];
                                }
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                position: "inside",
                                formatter: "{c}%"
                            }
                        }
                    },
                    {
                        name: "框",
                        type: "bar",
                        yAxisIndex: 1,
                        barCategoryGap: 50,
                        data: [100, 100, 100, 100, 100],
                        barWidth: 15,
                        itemStyle: {
                            normal: {
                                color: "none",
                                borderColor: "#00c1de",
                                borderWidth: 3,
                                barBorderRadius: 15
                            }
                        }
                    }
                ]
            };
            // 3 将配置好的图表加到dom元素上面
            myChart.setOption(option);

            // 4 图表的响应式.嵌套宽度必须设置%
            window.addEventListener("resize", () => {
                myChart.resize();
            })
        },
    },
    mounted() {
        this.$nextTick(() => {
            this.handleSearch();
        })
    },
}
</script>

<style>
#box {
    height: 100%;
    width: 100%;
}
</style>